<script setup lang="ts">
import { computed, ref, watch } from "vue";
import { dayjs, ElCard, ElSegmented, ElStatistic } from "element-plus";

import { graphic } from "echarts";
import Echart from "./Echart.vue";
import useRequest from "@/hooks/useRequest";
import { HChartForMP } from "@/global";

import API from "@/api/base";
import { useTransition } from "@vueuse/core";

const options = [
  { label: "用户访问", value: 1 },
  { label: "单品分享", value: 2 },
];
const segmented = ref(1);

const { data, run } = useRequest<HChartForMP>(API.statisticsByType, {
  defaultParams: { static_type: 1 },
});

const tooltipData = ref();
const chartOptions = ref<any>({
  grid: {
    top: "10px",
    left: "10px",
    bottom: "30px",
    right: "10px",
  },
  xAxis: {
    type: "category",
    boundaryGap: false,
    triggerEvent: true,
    axisTick: {
      show: false,
    },
    axisLine: {
      show: false,
    },
    axisLabel: {
      showMinLabel: false,
      showMaxLabel: false,
      formatter: (e: any) => {
        const ins = dayjs(e);
        return (
          (ins.get("month") + 1).toString().padStart(2, "0") +
          "." +
          ins.get("date").toString().padStart(2, "0")
        );
      },
    },
  },
  yAxis: {
    type: "value",
    show: false,
  },
  tooltip: {
    trigger: "axis",
    showContent: true,
    formatter: (params: any[]) => {
      tooltipData.value = data.value?.list[params[0]["dataIndex"]];
      return 1;
    },
  },
  series: [
    {
      type: "line",
      smooth: true,
      symbolSize: 0,
      showSymbol: false,
      lineStyle: { width: 3, color: "#4A3AFF" },
      areaStyle: {
        color: new graphic.LinearGradient(0, 0, 0, 1, [
          { offset: 0, color: "#4A3AFF" },
          { offset: 1, color: "#fff" },
        ]),
      },
    },
  ],
});

watch(segmented, (static_type) => run({ static_type }));

watch(data, (data) => {
  const { list = [] } = data || {};
  chartOptions.value = {
    xAxis: { data: list.map((e: any) => e.month) },
    series: [
      {
        data: list.map((e: any) => e.num),
      },
    ],
  };
});

const total = computed(() => {
  return (data.value?.list[0].total || 0) as number;
});

const renderTotal = useTransition(total);

const tooltipNum = computed<number>(() => tooltipData.value?.num || 0);

const statisticValue = useTransition(tooltipNum, { duration: 100 });
</script>

<template>
  <ElCard>
    <template #header>
      <div class="flex items-center">
        <div class="flex-auto">
          <div class="mb-2">小程序累计</div>
          <ElSegmented v-model="segmented" :options="options" />
        </div>

        <div>
          <ElStatistic
            :value="renderTotal"
            :value-style="{ fontWeight: 'bold' }"
          />
        </div>
      </div>
    </template>

    <div class="h-[30px]">
      <div class="flex justify-center items-baseline" v-show="tooltipData">
        <ElStatistic
          :value="statisticValue"
          :value-style="{ fontWeight: 'bold', fontSize: '32px', lineHeight: 0 }"
        />
        <!-- <div class="flex-center ml-3 mb-2">
          <ElIcon color="var(--el-color-success)"><CaretTop /></ElIcon>
          <span class="text-sm">{{ tooltipData?.up }}%</span>
        </div> -->
        <!-- <ElIcon color="var(--el-color-danger)"><CaretBottom /></ElIcon> -->
      </div>
    </div>

    <Echart
      class="h-[150px]"
      :options="chartOptions"
      @mouseout="tooltipData = undefined"
    />
  </ElCard>
</template>
